<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>享+新生活</title>
    <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="../interface/interface.js"></script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        body{
            background: #f5f5f5;
            height: 100%;
        }
        a{
            text-decoration: none;
        }
        ul,li{
            list-style: none;
        }
        html{
            font-size: 20px;
            font-family: "microsoft yahei";
        }
        .content{

        }
        .header{
            border-bottom: 1px solid #ccc;
            height:40px;
        }
        .header .title{
            font-size: 0.8rem;
            line-height: 40px;
            color: #323232;
            text-align: center;
            padding-left: 40px;

        }
        .titleIonc{
            position: relative;
            display: block;
            float: right;
            width: 40px;
            height: 40px;
            background: url("../images/ionc.png") no-repeat -400px 5px;
            background-size: 562px;
            z-index: 12;
        }
        .top .img{
            width: 35px;
            height: 35px;
            overflow: hidden;
            float: left;
        }
        .goods_show{
            margin-bottom: 10px;
            padding-top: 10px;
            background: #ffffff;
        }
        .top .img img{
            width: 100%;
        }
        .top .text{
            float: left;
            padding-left: 10px;
        }

        .top .text p:first-child{
            font-size: 0.8rem;
            line-height: 20px;

        }

        .top .text p:last-child{
            font-size: 0.6rem;
            color: #969696;
        }
        .textmiaoshu{
            clear: both;
            padding: 10px 0;
        }
        .textmiaoshu p{
            font-size: 0.8rem;
        }
        .img_show{
            width: 170px;
            height: 170px;
            padding-bottom: 6px;
        }
        .img_show img{
            width: 100%;;
        }
        .list_footer{
            overflow: hidden;
            background: #ffffff;
            border-top:1px solid #e6e6e6;
        }
        .list_footer p{
            font-size: 0.6rem;
            height:34px;
            color: #969696;
        }
        .paddings{
            padding-left: 10px;
        }
        .list_footer .look{
            line-height: 34px;
            width: 30px;
            background: url("../images/ionc.png") no-repeat -354px -1px;
            background-size: 562px;
            padding-left: 26px;
            float: left;
        }

        .list_footer .good{
            line-height: 34px;
            width: 30px;
            background: url("../images/ionc.png") no-repeat -217px -0px;
            background-size: 562px;
            padding-left: 26px;
            float: right;
        }

        .list_footer .pinglun{
            line-height: 34px;
            width: 30px;
            background: url("../images/ionc.png") no-repeat -292px -2px;
            background-size: 562px;
            padding-left: 26px;
            float: right;
        }
        .footer {
            height: 45px;
            border-top:1px solid #dcdcdc;
            position: fixed;
            bottom: 0px;
            z-index: 1000000;
            background: #ffffff;
        }
        .footer{
            width: 100%;
        }
        .footer li{
            width: 20%;
            float: left;
        }
        .footer li a{
            display: block;
            width: 70px;
            margin: 0 auto;
            overflow: hidden;
        }

        .footer li .shouye img{
            width: 562px;
            margin: 4px 20px;
        }

        .footer li .fenlei img{
            width: 562px;
            margin: -57px 20px;
        }

        .footer li .looklook img{
            width: 562px;
            margin: 3px -52px;
        }

        .footer li .yuexiang img{
            width: 562px;
            margin: -59px -52px;
        }

        .footer li .my img{
            width: 562px;
            margin: 3px -124px;
        }
        .goTop{
            background: #ffffff;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            position: fixed;
            right: 10px;
            bottom: 80px;
            border: 1px solid #ccc;
        }
        .goTop img{
            width: 80%;
            margin: 10% 0 0 10%;
        }

        .div1{
            float: left;
            overflow: hidden;
            width: 60%;
            border-radius:5px;
            margin-left: 20%;
            border:1px solid red;
            position: relative;
            top:4px
        }

        .tab1{
            color: rgb(245,103,130);
            float: left;
            width: 50%;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
        }
        .active{
            background: rgb(245,103,130);
            color: #ffffff;
        }
        .all{
            width: 100%;
            height: 100%;
            background:rgba(134,141,139,.5);
            position:fixed;
            z-index: 10;
            display: none;
        }
        .all .box{
            position: absolute;
            top:45px;
            right:8px;
            background: #ffffff;
            width: 40%;
            box-sizing: border-box;
            border-radius: 6px;
            text-align: center;
        }
        .all .box p{
            cursor: pointer;
            font-size:0.8rem;
            padding: 8px;
        }
        .all .box p:first-child{
            border-bottom: 1px solid rgb(237,237,237);
        }
        .all p a{
            color:black;
        }
    </style>
<body>
<div class="all">
    <div class="box">
        <p><a href="##">发布悦享</a></p>
        <p><a href="##">发不提问</a></p>
    </div>

</div>
<div class="content">

    <div class="header">
        <p class="title">
            <div class="div1" >
        <p class="tab1 active">悦翔</p>
        <p  class="tab1">问答</p>

    </div>
    <i class="titleIonc"></i>
    </p>

</div>
<div class="main" style="padding-bottom: 50px">
    <ul class="goodsparent">
        <li class="goods_show">
            <div class="top paddings">
                <div class="img">
                    <img src="imgs/touxiang.jpg" alt="">
                </div>
                <div class="text">
                    <p>我是购物狂</p>
                    <p>2016-12-26 16:29</p>
                </div>
            </div>
            <div class="textmiaoshu paddings">
                <p>我已经忘了是第几双,将博士的鞋,</p>
            </div>
            <div class="img_show paddings">
                <img src="imgs/touxiang.jpg" alt="">
            </div>
            <div class="list_footer">
                <div class="paddings">
                    <p class="look">1527</p>
                    <p class="good">228</p>
                    <p class="pinglun">562</p>
                </div>
            </div>
        </li>
        <li class="goods_show">
            <div class="top paddings">
                <div class="img">
                    <img src="imgs/touxiang.jpg" alt="">
                </div>
                <div class="text">
                    <p>我是购物狂</p>
                    <p>2016-12-26 16:29</p>
                </div>
            </div>
            <div class="textmiaoshu paddings">
                <p>我已经忘了是第几双,将博士的鞋,</p>
            </div>
            <div class="img_show paddings">
                <img src="imgs/touxiang.jpg" alt="">
            </div>
            <div class="list_footer">
                <div class="paddings">
                    <p class="look">1527</p>
                    <p class="good">228</p>
                    <p class="pinglun">562</p>
                </div>
            </div>
        </li>
        <li class="goods_show">
            <div class="top paddings">
                <div class="img">
                    <img src="imgs/touxiang.jpg" alt="">
                </div>
                <div class="text">
                    <p>我是购物狂</p>
                    <p>2016-12-26 16:29</p>
                </div>
            </div>
            <div class="textmiaoshu paddings">
                <p>我已经忘了是第几双,将博士的鞋,</p>
            </div>
            <div class="img_show paddings">
                <img src="imgs/touxiang.jpg" alt="">
            </div>
            <div class="list_footer">
                <div class="paddings">
                    <p class="look">1527</p>
                    <p class="good">228</p>
                    <p class="pinglun">562</p>
                </div>
            </div>
        </li>
        <li class="goods_show">
            <div class="top paddings">
                <div class="img">
                    <img src="imgs/touxiang.jpg" alt="">
                </div>
                <div class="text">
                    <p>我是购物狂</p>
                    <p>2016-12-26 16:29</p>
                </div>
            </div>
            <div class="textmiaoshu paddings">
                <p>我已经忘了是第几双,将博士的鞋,</p>
            </div>
            <div class="img_show paddings">
                <img src="imgs/touxiang.jpg" alt="">
            </div>
            <div class="list_footer">
                <div class="paddings">
                    <p class="look">1527</p>
                    <p class="good">228</p>
                    <p class="pinglun">562</p>
                </div>
            </div>
        </li>
    </ul>
</div>
</div>

<div class="main1" style="padding-bottom: 50px;display: none">
    <ul class="goodsparent">
        <li class="goods_show">
            <div class="top paddings">
                <div class="img">
                    <img src="imgs/touxiang.jpg" alt="">
                </div>
                <div class="text">
                    <p>我是购物狂</p>
                    <p>2016-12-26 16:29</p>
                </div>
            </div>
            <div class="textmiaoshu paddings">
                <p>我已经忘了是第几双,将博士的鞋,</p>
            </div>
            <div class="img_show paddings">
                <img src="imgs/touxiang.jpg" alt="">
            </div>
            <div class="list_footer">
                <div class="paddings">
                    <p class="look">1527</p>
                    <p class="good">228</p>
                    <p class="pinglun">562</p>
                </div>
            </div>
        </li>
        <li class="goods_show">
            <div class="top paddings">
                <div class="img">
                    <img src="imgs/touxiang.jpg" alt="">
                </div>
                <div class="text">
                    <p>我是购物狂</p>
                    <p>2016-12-26 16:29</p>
                </div>
            </div>
            <div class="textmiaoshu paddings">
                <p>我已经忘了是第几双,将博士的鞋,</p>
            </div>
            <div class="img_show paddings">
                <img src="imgs/touxiang.jpg" alt="">
            </div>
            <div class="list_footer">
                <div class="paddings">
                    <p class="look">1527</p>
                    <p class="good">228</p>
                    <p class="pinglun">562</p>
                </div>
            </div>
        </li>
        <li class="goods_show">
            <div class="top paddings">
                <div class="img">
                    <img src="imgs/touxiang.jpg" alt="">
                </div>
                <div class="text">
                    <p>我是购物狂</p>
                    <p>2016-12-26 16:29</p>
                </div>
            </div>
            <div class="textmiaoshu paddings">
                <p>我已经忘了是第几双,将博士的鞋,</p>
            </div>
            <div class="img_show paddings">
                <img src="imgs/touxiang.jpg" alt="">
            </div>
            <div class="list_footer">
                <div class="paddings">
                    <p class="look">1527</p>
                    <p class="good">228</p>
                    <p class="pinglun">562</p>
                </div>
            </div>
        </li>
        <li class="goods_show">
            <div class="top paddings">
                <div class="img">
                    <img src="imgs/touxiang.jpg" alt="">
                </div>
                <div class="text">
                    <p>我是购物狂</p>
                    <p>2016-12-26 16:29</p>
                </div>
            </div>
            <div class="textmiaoshu paddings">
                <p>我已经忘了是第几双,将博士的鞋,</p>
            </div>
            <div class="img_show paddings">
                <img src="imgs/touxiang.jpg" alt="">
            </div>
            <div class="list_footer">
                <div class="paddings">
                    <p class="look">1527</p>
                    <p class="good">228</p>
                    <p class="pinglun">562</p>
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="footer">
    <ul>
        <li>
            <a class="shouye" href="##">
                <img src="../images/ionc.png" alt="">
            </a>
        </li>
        <li>
            <a class="fenlei" href="##">
                <img src="../images/ionc.png" alt="">
            </a>
        </li>
        <li>
            <a class="looklook" href="##">
                <img src="../images/ionc.png" alt="">
            </a>
        </li>
        <li>
            <a class="yuexiang" href="##">
                <img src="../images/ionc.png" alt="">
            </a>
        </li>
        <li>
            <a class="my" href="##">
                <img src="../images/ionc.png" alt="">
            </a>
        </li>
    </ul>
</div>
<div class="goTop" style="display: none">
    <img src="../images/gotop_b.png" alt="">
</div>

</body>
<script>

</script>
<script>
    (function(rf){
        var opt = {
            getDoms : function(){
                this.doms = {
                    goTop : $('.goTop'),
                    good : $('.good'),
                    look : $('.look'),
                    pinglun : $('.pinglun'),
                    goodsparent : $('.goodsparent'),
                    index : 1,
                    tab1:$('.tab1')
                }
            },
            init : function (){
                var _self = this;
                _self.getDoms();
                _self.addEvent();
                var opt = {
                    url : "/mobile/index.php?act=circle&op=index&c_id=2",
                    type: "GET",
                };
                rf.getData(opt,function(data){
                       if (data['code']==200){
                             _self.template(_self.doms.goodsparent,data['datas'])
                       }
                })
            },
            addEvent : function(){
                var _self = this;
                var _selfDoms = _self.doms;
                $(document).on('scroll',function(){
                    $(document).scrollTop()>10?_selfDoms.goTop.fadeIn():_selfDoms.goTop.fadeOut();
                    if($(document).scrollTop()>(((302*4)*_self.doms.index)-($(window).height()))){
                        _self.doms.index++;
                        var opt = {
                            url : "/mobile/index.php?act=circle&op=index&c_id=2&page="+_self.doms.index++,
                            type: "GET",
                        };
                        console.log(opt);
                        return;
                        rf.getData(opt,function(data){
                            if (data['code']==200){
                                _self.template(_self.doms.goodsparent,data['datas'])
                            }
                        })
                    }

            });
                _selfDoms.fabu.on('click', function () {
                    alert_msg('q')
                    $('.all').toggle()
                });
                _selfDoms.goTop.on('click',function(){
                    $(document).scrollTop(0);
                });
                _selfDoms.good.on('click',function(){
                    var opt = {
                        url : rf.interfaces.info
                    };
//                    rf.getData(opt,function(data){
//                        _self.text()
//                    })
                })

                _selfDoms.look.on('click',function(){
                    var opt = {
                        url : rf.interfaces.info
                    };
//                    rf.getData(opt,function(data){
//                        _self.text()
//                    })
                })

                _selfDoms.pinglun.on('click',function(){
                    var opt = {
                        url : rf.interfaces.info
                    };
//                    rf.getData(opt,function(data){
//                        _self.text()
//                    })
                })
                _selfDoms.tab1.on('click',function(){
                    if($(this).index()==0){
                        $('.main1').fadeIn();
                        $('.main').fadeOut();
                        _selfDoms.tab1.removeClass('active');
                        $(this).addClass('active')
                    }
                    if($(this).index()==1){
                        $('.main').fadeIn();
                        $('.main1').fadeOut();
                        _selfDoms.tab1.removeClass('active');
                        $(this).addClass('active')
                    }
                })
            },
            text : function(obj,number){
                obj.html(number)
            },
            template : function(obj,data){
                var text = '';
                for(var i=0;i<data.length;i++) {
                    text += '<li class="goods_show">';
                    text += '<div class="top paddings">';
                    text += '<div class="img">';
                    if (data[i]['avatar']==null) {
                        text += '<img src="/data/upload/shop/common/default_user_portrait.gif?0.17620300 1484978714" alt="">';
                    }else{
                        text += '<img src="'+data[i]["avator"]+'" />'
                    }
                    text += '</div>';
                    text += '<div class="text">';
                    text += '<p>'+data[i]["member_name"]+'</p>';
                    text += '<p>'+data[i]["theme_addtime"]+'</p>';
                    text += '</div>';
                    text += '</div>';
                    text += '<div class="textmiaoshu paddings">';
                    text += '<p>'+data[i]["wap_content"]+'</p>';
                    text += '</div>';
                    text += '<div class="img_show paddings">';
                    text += '<img src="imgs/touxiang.jpg" alt="">';
                    text += '</div>';
                    text += '<div class="list_footer">';
                    text += '<div class="paddings">';
                    text += '<p class="look">'+data[i]["theme_browsecount"]+'</p>';
                    text += '<p class="good">'+data[i]["theme_likecount"]+'</p>';
                    text += '<p class="pinglun">'+data[i]["theme_commentcount"]+'</p>';
                    text += '</div>';
                    text += '</div>';
                    text += '</li>';
                }
                obj.append(text);
            }

        };

        opt.init();
    })(window)
</script>

</html>